<template>
  <div class="wrap">
    <div class="menu_content_wrap">
      <div class="menu_content_title">
        <div>
          菜单预览
          <a-popover placement="right">
            <template slot="content">
              <div>鼠标右键点击预览菜单，可展示更多操作</div>
            </template>
            <i class="el-icon-info" />
          </a-popover>
        </div>
        <div style="display: flex; align-items: center">
          <i
            style="margin-right: 10px; cursor: pointer"
            class="el-icon-circle-plus-outline"
            @click="newTopMenu"
          />
          <span>pscc呼叫中心系统</span>
        </div>
      </div>
      <a-tree
        v-if="menuList.length > 0"
        :replace-fields="replaceFields"
        show-line
        :default-expand-all="true"
        :tree-data="menuList"
      >
        <template #title="node">
          <a-dropdown :trigger="['contextmenu']">
            <span>{{ node.menuName }}</span>
            <template #overlay>
              <a-menu
                @click="({ key: menuKey }) => onContextMenuClick(node, menuKey)"
              >
                <a-menu-item key="1">编辑菜单</a-menu-item>
                <a-menu-item v-if="node.menuType === 1" key="2">新建子菜单</a-menu-item>
                <a-menu-item key="3">删除</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </a-tree>
    </div>
    <div class="edit_menu_wrap">
      <editMenuform
        v-if="editMenuformVisible"
        ref="editMenuform"
        :curr-menu-form="currMenuForm"
        :save-type="saveType"
        :menu-list="menuList"
        :curr-system="currSystem"
        @menuGroupLeftMenu="initData"
      />
    </div>
  </div>
</template>

<script>
import editMenuform from './editMenuform'
import { menuGroupLeftMenu } from '@/api/golangApi/menuGroup'
import { menuDelete } from '@/api/golangApi/menu'
export default {
  name: 'EditSystemMenu',
  components: {
    editMenuform
  },
  props: {
    currSystem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      currMenuForm: {},
      treeData: [],
      menuList: [],
      saveType: 'add',
      replaceFields: {
        children: 'menuSvoList',
        title: 'menuName'
      },
      editMenuformVisible: false
    }
  },
  methods: {
    async initData(item = this.currSystem) {
      this.treeData = [
        {
          title: '基本信息',
          key: 'base',
          children: [
            {
              title: '首页',
              key: '0-0-0'
            },
            {
              title: '缴费查询',
              key: '0-0-1'
            },
            {
              title: '黑名单',
              key: '0-0-2'
            },
            {
              title: '消费统计',
              key: '0-0-3'
            }
          ]
        },
        {
          title: '坐席设置',
          key: '0-1',
          children: [
            { title: '角色权限', key: '0-1-0-0' },
            { title: '坐席列表', key: '0-1-0-1' }
          ]
        },
        {
          title: '项目管控',
          key: '0-2'
        }
      ]
      await this.menuGroupLeftMenu(item)
    },
    newTopMenu() {
      this.editMenuformVisible = true
      this.$nextTick(() => {
        this.$refs.editMenuform.initData()
      })
    },
    async menuGroupLeftMenu(item) {
      try {
        const res = await menuGroupLeftMenu({
          id: item.id
        })
        if (res.code === 200) {
          this.menuList = res.data || []
        }
      } catch (error) {
        console.log(error)
      }
    },
    onContextMenuClick(node, menuKey) {
      if (menuKey === '1') {
        this.currMenuForm = {
          id: node.id,
          menuGroupId: this.currSystem.id,
          menuName: node.menuName,
          value: node.value,
          url: node.url,
          menuType: 2,
          parentId: node.parentId
        }
        console.log(this.currMenuForm, 'currMenuForm')
        this.saveType = 'edit'
        if (!this.editMenuformVisible) {
          this.editMenuformVisible = true
        } else {
          this.$refs.editMenuform.initData()
        }
      } else if (menuKey === '2') {
        console.log(123)
      } else if (menuKey === '3') {
        this.menuDelete(node)
      }
    },
    async menuDelete(node) {
      try {
        const res = await menuDelete({
          id: node.id
        })
        if (res.code === 200) {
          this.$message.success(`【${node.menuName}】已删除`)
          this.initData()
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  height: 100%;
  .menu_content_wrap {
    flex: 1;
    min-width: 200px;
    background-color: #fff;
    padding: 16px;
    .menu_content_title {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      padding-bottom: 6px;
    }
  }
  .edit_menu_wrap {
    width: 500px;
    height: 100%;
    border-left: 1px solid #eee;
  }
}
</style>
